<template>
  <div class="bui-box article-tag">
    <div class="bui-left">
      <tt-icon type="tag" color="#cacaca" size="21"></tt-icon>
      <ul class="tag-list">
        <li class="tag-item" v-for="item in tagInfo.tags">
          <a class="label-link" :href="'/search/?keyword=' + item.name" target="_blank">{{item.name}}</a>
        </li>
      </ul>
    </div>
    <div class="bui-right">
      <star :group-id="tagInfo.groupId" :item-id="tagInfo.itemId" :repin="tagInfo.repin"></star>
      <report :group-id="tagInfo.groupId"></report>
    </div>
  </div>
</template>

<style lang="less">
  .article-tag {
    margin-bottom: 28px;

    i {
      display: inline-block;
      vertical-align: middle;
    }

    .tag-list {
      display: inline-block;
      vertical-align: middle;
    }
    .tag-item {
      display: inline-block;
      margin-right: 8px;
      font-size: 14px;
      .label-link{
        color: #406599;
      }
      &:before{
        content:'/';
        padding-right:10px;
        color: #e0e0e0;
      }
      &:first-child{
        &:before{
          content:'';
        }
      }
    }

    .report {
      display: inline-block;
      margin-left: 10px;
    }
  }
</style>

<script>
  import Star from 'byted-toutiao-pc-business-components/components/star'
  import Report from 'byted-toutiao-pc-business-components/components/report'

  export default {
    props: {
      tagInfo: Object
    },
    components: {
      Star,
      Report
    }
  }
</script>



// WEBPACK FOOTER //
// articleTag.vue?3c173e52
